<template>
	<view>
		<view class="seach">
			<view class="seach-s">
				<image src="../../static/images/tb_search.png" mode=""></image>
				<input type="text" value="" placeholder="输入订单号/客户/货品名/编号搜索订单" placeholder-class="f28 c999" />
			</view>
		</view>
		<view class="classify">
			<view class="classify-l" @click="calendar">
				所有时间段
				<image src="../../static/images/arrow_down.png" mode=""></image>
			</view>
			<view class="classify-l" @click="ShowUser()">
				{{ msg }}
				<image src="../../static/images/arrow_down.png" mode=""></image>
			</view>
			<view class="classify-l" @click="showGood()">
				{{goodsName == '' ? '全部采购订单' : goodsName}}
				<image src="../../static/images/arrow_down.png" mode=""></image>
			</view>
		</view>
		
		<!-- 全部员工 -->
		<view class="combobox" :class="userClass" @tap="hideUser">
			<view class="content">
				<view class="show-li" @click="all">全部员工</view>
				<view class="show-li" v-for="(item, index) in userArr" :key="index" :class="itemIndex == index ? 'active' : ''" @click="useename(item, index)">
					{{ item.name }}{{ item.is_boss == 1 ? '(老板）' : '' }}
				</view>
			</view>
		</view>
		
		<!-- 采购单下拉 -->
		
		
		<view class="combobox" :class="goodsClass" @tap="hideGood">
			<view class="content">
				<view class="show-li" v-for="(item, index) in goods" :class="itemIndex == index ? 'active' : ''" :key="index" @tap="goodsClick(index,item.name)">{{ item.name }}</view>
			</view>
		</view>
		

		<view class="ima" v-show="wd"><image src="../../static/slice/86438f8f6d0029f503d57efb448590f.png" mode=""></image></view>
		<!-- 订单数据 -->
		
		<view class="information" v-for="(item,index) in orderList" :key="index" @tap="goDetail(item.supplier_id,item.order_id)">
			<view class="information-t">
				<view class="f30 c333">采购单号：{{item.order_no}}</view>
				<view class="staple f28 cfff tCenter" v-if="item.order_type==1">订</view>
				<view class="retreat f28 cfff tCenter" v-if="item.order_type==2">退</view>
			</view>
			<view class="information-b">
				<view class="box">
					<view class="box-l f30 c333">{{item.supplier_name}}</view>
					<view class="box-r black f30" v-if="item.owe_num!=0" style="color: #249AF6;">未入库数：{{item.owe_num}}</view>
					 <view class="box-r black f30 c666" v-if="item.owe_num==0 && item.order_type==1">已完成</view> 
				</view>
				<view class="box" style="padding: 20rpx 0 30rpx  0;">
					<view class="box-l black f28 c333">{{ item.create_time | birtime }}</view>
					<view class="box-r"></view>
				</view>
				<view class="box">
					<view class="box-l f28 c333" v-if="item.order_type==1">订单金额 : ¥{{item.payable}}</view>
					<view class="box-l f28 c333" v-if="item.order_type==2">本次应退 : ¥{{item.payable}}</view>
					<view class="box-r f28 c333" v-if="item.order_type==1">开单 : {{item.order_num}}</view>
					<view class="box-r f28 c333" v-if="item.order_type==2">退货 : {{item.order_num}}</view>
				</view>
			</view>
		
		<view class="closeImg" v-if="item.is_close==1"><image :src="'../../static/client/close.png'" mode="aspectFit"></image></view>
		</view>
		
	<!-- 日历选择弹窗 -->

		<uni-popup ref="popup" type="center">
			<view class="dateBox">
				<view class="dateCont">
					<view class="title">
						<view class="timeName f36 C333">选择时间</view>
						<view class="allTime f32 " @tap="allTime(0)">全部时间</view>
					</view>
					<view class="date-item">
						<view class="name f32 c666">开始时间</view>
						<view class="number f32 c333">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="starDateChange">{{ startDates=='' ? date: startDates }}</picker>
						</view>
					</view>
					<view class="date-item">
						<view class="name f32 c666">结束时间</view>
						<view class="number f32 c333">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="endDateChange">{{ endDates == '' ? date : endDates}}</picker>
						</view>
					</view>

					<view class="btn">
						<view class="f32 c666" @click="cancel">取消</view>
						<view class="f32 define" @click="define()">确定</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 日历 -->
		<view class="mycalendar" :style="{ top: insert ? '0' : '100%' }">
			<uni-calendar :lunar="true" :start-date="'1998-3-19'" :end-date="'2099-5-20'" @change="change"></uni-calendar>
		</view>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
export default {
	components: {
		uniPopup,
		uniIcons
	
	},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			userArr: [],
			msg: '全部员工',
			itemIndex:'',
			userClass: '',
			timeshow: true,
			insert: false,
			fulldate: '2020-03-05',
			type: 0,
			endTime: '2010-05-00',
			show: true,
			showtru: true,
			orderList: [],
			goodsName:'',
			goodsClass: '', //采购css开关
			goods: [
				{
					name: '全部采购订单',
					type:1
				},
				{
					name: '未入库采购单',
					type:2
				},
				{
					name: '已完成',
					type:3
				},
				{
					name: '已关闭',
					type:4
				},
				{
					name: '退货单',
					type:4
				}
			],
			date: currentDate,
			startDates: '', //开始时间
			endDates: '', //结束时间
			wd: false //订单数据
		};
	},
	onLoad() {
		this.userIndex();
		this.getOrderList();
	},
	onShow() {
		this.getOrderList();
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		},
	
	},
	methods: {
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
		
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		starDateChange(e) {
			console.log(e);
			this.startDates = e.detail.value;
		},
		endDateChange(e) {
			console.log(e);
			this.endDates = e.detail.value;
		},
		define(){
			this.startDates=this.startDates=='' ? this.date : this.startDates,
			this.endDates=this.endDates == '' ? this.date : this.endDates,
			this.$refs.popup.close();
			this.getOrderList();
		},
		cancel() {
			this.$refs.popup.close();
		},
		calendar() {
		this.$refs.popup.open();
		},
		closetimes() {
			this.timeshow = true;
		},
		showcalendar(type) {
			this.type = type;
			(this.insert = true), (this.timeshow = true);
		},
		change(e) {
			(this.insert = false), (this.timeshow = false);
			if (this.type == 0) {
				this.fulldate = e.fulldate;
			} else {
				this.endTime = e.fulldate;
			}
		},
		ShowUser() {
			this.userClass = 'show';
		},
		hideUser() {
			this.userClass = 'hide';
		},
		showGood(){
			this.goodsClass = 'show';
		},
		hideGood() {
			this.goodsClass = 'hide';
		},
		goodsClick(index,name) {
			this.itemIndex = index;
			this.goodsName=name
			this.getOrderList();
			if(this.orderList.length==0){
				this.$sToast('没有更多数据了')
			}
		
			
		},
		showtrue() {
			if (this.showtru) {
				this.showtru = false;
			} else {
				this.showtru = true;
			}
		},
		userIndex() {
			this.$ajax('api/v1.user/index', {}, 'GET').then(res => {
				this.userArr = res.result;
			});
		},
		//采购订单
		getOrderList() {
			let that = this;
			that.$ajax('api/v1.supplier/orderList', {})
				.then(res => {
					if (res.code == 1) {
						that.orderList = res.result.list;
					}
				})
				.catch(res => {
					that.$sToast(res.message);
				});
		},
		goDetail(supplierId,id){
			uni.navigateTo({
				url:'./purchaseDetails?supplierId='+supplierId+'&orderId='+id
			})
		},
		all() {
			this.msg = '全部员工';
			this.uid = 0;
			this.getOrderList();
			if(this.orderList.length==0){
				this.$sToast('没有更多数据了')
			}
		},
		useename(e,index) {
			// console.log(e);
			this.msg = e.name;
			this.uid = e.user_id;
			this.itemIndex = index;
			this.getOrderList();
		if(this.orderList.length==0){
			this.$sToast('没有更多数据了')
		}
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.seach {
	width: 100%;
	background: #249af6;
	padding: 20rpx 30rpx 0 30rpx;
	display: flex;
	padding-bottom: 25rpx;
	box-sizing: border-box;
	.seach-s {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 99999rpx;
		display: flex;
		box-sizing: border-box;
		input {
			width: 100%;
			padding-right: 30rpx;
			border-style: none;
			font-size: 28rpx;
			color: #999;
			height: 60rpx;
			line-height: 60rpx;
		}
		image {
			width: 31rpx;
			height: 28rpx;
			margin-top: 15rpx;
			padding-left: 30rpx;

			margin-right: 20rpx;
		}
	}
	.seach-e {
		image {
			width: 44rpx;
			height: 44rpx;
			margin-top: 12rpx;
			margin-left: 10rpx;
		}
	}
}
.classify {
	display: flex;
	background-color: #ffffff;
	justify-content: space-around;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	height: 90rpx;
	line-height: 90rpx;
	image {
		width: 17rpx;
		height: 10rpx;
		margin-left: 11rpx;
	}
}
.ima {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 227rpx;
	image {
		width: 370upx;
		height: 390upx;
	}
}
.tankuang {
	width: 642rpx;
	height: 400rpx;
	position: fixed;
	background-color: #ffffff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	.t-o {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 3rpx solid #eeeeee;
	}
	.t-w {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-around;
		border-bottom: 3rpx solid #eeeeee;
		.t-left {
			color: #666666;
		}
	}
	.t-s {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-evenly;
		.s-left {
			color: #666666;
		}
		.s-right {
			color: #249af6;
		}
	}
}
.timeshow {
	display: none;
}
.mycalendar {
	width: 100%;
	height: 100%;
	position: fixed;
	bottom: 0;
	transition: all 0.5s;
}
.combobox {
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	position: fixed;
	font-size: 30rpx;
	z-index: 2;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	line-height: 48rpx;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	&.show {
		display: block;
	}
	&.hide {
		display: none;
	}
	.content {
		background-color: $white-background;
		.show-li {
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 2rpx solid #f7f7f7;
			padding-left: 30rpx;
			&.active {
				color: #249af6;
				background: url('../../static/slice/gou.png') no-repeat right 40upx center;
				background-size: 38upx 32upx;
			}
			image {
				width: 38rpx;
				height: 32rpx;
				margin: 50rpx;
				float: right;
			}
		}
	}
}
.information {
	margin-top: 20rpx;
	background-color: #ffffff;
	padding: 45rpx 0;
	box-sizing: border-box;
	position: relative;
	.closeImg{
		position: absolute;
		top:150rpx;
		right: 220rpx;
		image{
			width: 115rpx;
			height: 100rpx;
		}
	}
	.information-t {
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #eeeeee;
		padding: 0 30rpx 20rpx 30rpx;
		.staple {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			background-color: #249af6;
			border-radius: 5rpx;
		}
		.retreat {
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			background-color: #f64444;
			border-radius: 5rpx;
		}
	}
	.information-b {
		padding: 30rpx 30rpx 0 30rpx;	
		.box {
			display: flex;
			justify-content: space-between;
		}
	}
}
.show {
	display: none;
}
.show-li:hover {
	color: #249af6;
}
.showtrue {
	display: none;
}
.black {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
}
// 日期选择弹窗

.dateBox {
	width: 700rpx;
	padding: 0 50upx;
	box-sizing: border-box;
	border-radius: 10rpx;
	.dateCont {
		background-color: $white-background;
		.title {
			text-align: center;
			position: relative;
			padding: 30rpx;
			border-bottom: 2rpx #eeee solid;
			.allTime {
				color: #f64444;
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}
		}
		.date-item {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 2rpx #f7f7f7 solid;
			padding: 30rpx;
			&:last-child {
				border-bottom: none;
			}
		}
		.btn {
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding: 30rpx 0;
			view {
				width: 50%;
				text-align: center;
			}
			.define {
				color: #249af6;
			}
		}
	}
}
</style>
